<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="充值方式">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="支付宝" value="zfb"></el-option>
                    <el-option label="微信" value="wx"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="充值状态">
                <el-select v-model="formInline.region1" placeholder="活动区域">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="代付款" value="dfk"></el-option>
                    <el-option label="已支付" value="yzf"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="block">
                    <el-date-picker
                            v-model="formInline.value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="">查询</el-button>
            </el-form-item>
        </el-form>
        <div>

        </div>
        <el-table
                :data="list"
                style="100%">
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormat"
                    prop="add_time"
                    label="充值时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="order_sn"
                    label="充值订单号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="付款金额"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="pay_type"
                    label="充值方式"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="llb"
                    label="流量币"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="pay_state"
                    label="充值状态"
            >
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[3,10,30, 200, 300, 400]"
                    :page-size="limit"
                    @current-change="current_change"
                    @size-change="handleSizeChange"
                    :total="count">
            </el-pagination>
        </div>
    </div>

</template>
<script>
  import {  recharge_order } from '@/api/task'

  export default {
    name: 'czjl',
    data() {
      return {
        formInline: {
          user: '',
          region: '',
          region1: '',
          value1: ''

        },
        list: [],
        count: 0,
        limit: 10,
        currentPage:1,
        tableData: [{
          xh: '1',
          sj: '2020-10-20',
          dh: ' 123213154564654512',
          fkje: '20000元',
          czfs: '支付宝',
          llb: '20000',
          czzt: '已支付'

        }]

      }
    },
    created() {
      this.fetch_task(1,this.limit)
    },
    methods: {
      fetch_task(page,limit,where='') {
        recharge_order({'page':page,'limit':limit,'where':where=''}).then(res => {
          this.list = res.data.list
          console.log(this.list)
        }).catch(error => {
          console.log(error)
        })
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      handleSizeChange(val) {
        this.limit = val
        this.fetch_task(1,this.limit)
        console.log(this.limit)
      },
      current_change:function(currentPage){
        this.fetch_task(currentPage,this.limit)
      },
      dateFormat: function(row, column) {
        var timeStamp = row[column.property]
        if (timeStamp == undefined) {
          return ''
        }
        var date = new Date()
        date.setTime(timeStamp * 1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? ('0' + minute) : minute
        second = second < 10 ? ('0' + second) : second
        return y + '-' + m + '-' + d
      }

    },


  }
</script>
<style scoped>

</style>
